<template>
    <div>
        <div class="scllo">
            <div  id="peisingContent" >
                <div class="box" v-for="(item,index) in list" :key="index">
                    <div style="position: relative;box-sizing: border-box;" >
                        <div class="flex justify_center" style="font-size: 16px;font-weight: 600;">四川威斯腾物流有限公司</div>
                        <div class="flex justify_center" style="font-size: 16px;font-weight: 600;margin-bottom: 24px;">送货配送单</div>
                        <a-image class="logoImg" src="/logo.png"></a-image>
                        <div class="flex">
                            <div style="height: 300px;width: 40px;writing-mode: tb-rl;margin-top: 40px;margin-right: 10px" >
                                <div class="flex justify_center">
                                    <div style="margin-bottom: 20px;">第一联存根</div>
                                    <div style="margin-bottom: 20px;">第二联财务</div>
                                    <div>第三联客户</div> 
                                </div>
                                <div class="flex justify_center" >
                                    <div style="margin-bottom: 20px;">第四联司机</div>
                                    <div>第五联操作</div>
                                </div>
                            </div>
                            <div  class="flex_1">
                                <div class="flex justify_between" style="margin-bottom: 8px;">
                                    <div>配送单位：{{props.row.ps_dept.name}}</div>
                                    <div>车牌号：</div>
                                    <div>派单人：{{props.user.nickname}}</div>
                                </div>
                                <div class="border">
                                    <div class="flex ">
                                        <div class="flex flex_1 text_center">
                                            <div class="padd12 bor_r bor_b center" style="width: 100px;">
                                                <div>运单号</div>
                                            </div>
                                            <div class="flex_1 padd12 bor_r bor_b center">
                                                <div>{{item.prediction.yundanhao}}</div>
                                            </div>
                                        </div>
                                        <div class="flex flex_1  text_center">
                                            <div class="padd12 bor_r bor_b center" style="width: 100px;">
                                                <div>运输类型</div>
                                            </div>
                                            <div class="flex_1 padd12  bor_b center">
                                                <div>{{item.prediction.transport_type == 1?'集装箱':item.prediction.transport_type == 2?'整车':'批量快运'}}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex ">
                                        <div class="flex flex_1 text_center">
                                            <div class="padd12 bor_r bor_b center" style="width: 100px;">
                                                <div>发货单位</div>
                                            </div>
                                            <div class="flex_1 padd12 bor_r bor_b center">
                                                <div> {{ item.prediction.shipper }}</div>
                                            </div>
                                            
                                        </div>
                                        <div class="flex flex_1  text_center">
                                            <div class="padd12 bor_r bor_b center" style="width: 100px;">
                                                <div>发货电话</div>
                                            </div>
                                            <div class="flex_1 padd12  bor_b center">
                                                <div> {{ item.prediction.shipper_phone }}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex ">
                                        <div class="flex flex_1 text_center">
                                            <div class="padd12 bor_r bor_b center" style="width: 100px;">
                                                <div>收货单位</div>
                                            </div>
                                            <div class="flex_1 padd12 bor_r bor_b center">
                                                <div> {{props.row.dept.name}}</div>
                                            </div>
                                            
                                        </div>
                                        <div class="flex flex_1  text_center">
                                            <div class="padd12 bor_r bor_b center" style="width: 100px;">
                                                <div>收货电话</div>
                                            </div>
                                            <div class="flex_1 padd12  bor_b center">
                                                <div> {{props.row.dept.phone}}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex text_center">
                                        <div class="padd12 bor_r bor_b center" style="width: 100px;">
                                            <div>送货地址</div>
                                        </div>
                                        <div class="flex_1 padd12  bor_b center" style="justify-content: flex-start;">
                                            <div> {{item.prediction.peisong_address.address}}</div>
                                        </div>
                                    </div>
                                    <div class="flex text_center">
                                        <div class="flex_1 flex">
                                            <div class="padd12 bor_r bor_b center" style="width: 100px;">
                                                <div>品名</div>
                                            </div>
                                            <div class="flex_1 padd12 bor_r bor_b center" >
                                                <div> 件数</div>
                                            </div>
                                            <div class="flex_1 padd12 bor_r bor_b center" >
                                                <div> 重量</div>
                                            </div>
                                            <div class="flex_1 padd12 bor_r bor_b center" >
                                                <div> 体积</div>
                                            </div>
                                        </div>
                                        <div class="flex_1 flex">
                                            <div class="padd12 bor_r bor_b center" style="width: 100px;">
                                                <div>车号(箱号)</div>
                                            </div>
                                            <div class="flex_1 padd12 bor_r bor_b center" >
                                                <div> 派单时间</div>
                                            </div>
                                            <div class="flex_1 padd12  bor_b center" >
                                                <div> {{tool.dateFormat(Math.round(new Date().getTime() / 1000).toString(),"yyyy-MM-dd hh:mm:ss")}}</div>
                                            </div>
                                            
                                        </div>
                                    </div>
                                    <!-- 货物数据 -->
                                    <div class="flex text_center">
                                        <div class="flex flex_column" style="width: calc(50% + 100px);">
                                            <div class="flex" v-for="(ite,ind) in item.prediction.goods_data" :key="ind">
                                                <div class="padd12 bor_r bor_b center" style="width: 100px;" :style="{height:item == ''?'39px':'auto'}">
                                                    <div>{{item.prediction.goods_name}}</div>
                                                </div>
                                                <div class="flex_1 padd12 bor_r bor_b center" >
                                                    <div>{{ite.number_yu}}</div>
                                                </div>
                                                <div class="flex_1 padd12 bor_r bor_b center" >
                                                    <div> {{(ite.hz_weight - 0).toFixed(2)}}</div>
                                                </div>
                                                <div class="flex_1 padd12 bor_r bor_b center" >
                                                    <div> </div>
                                                </div>
                                                <div class="padd12 bor_r bor_b center" style="width: 100px;">
                                                    <div>{{item.prediction.transport_type == 1?ite.box:item.prediction.transport_type == 2?item.prediction.car_no:item.prediction.car_no}}</div>
                                                </div>
                                            </div>
                                            <!-- <div class="flex">
                                                <div class="padd12 bor_r bor_b center" style="width: 100px;">
                                                    <div>运输要求</div>
                                                </div>
                                                <div class="flex_1 padd12 bor_r bor_b center" >
                                                    <div> </div>
                                                </div>
                                            </div> -->
                                            <div class="flex flex_1">
                                                <div class="padd12 bor_r  center" style="width: 100px;">
                                                    <div>备注</div>
                                                </div>
                                                <div class="flex_1 padd12 bor_r  center" >
                                                    <div> </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex_1 flex flex_column">
                                            <div class="flex">
                                                <div class="flex_1 padd12 bor_r bor_b center" >
                                                    <div> 返单</div>
                                                </div>
                                                <div class="flex_1 padd12  bor_b center" >
                                                    <div> </div>
                                                </div>
                                            </div>
                                            <div class="flex " >
                                                <div class="flex_1 padd12 bor_r bor_b center" >
                                                    <div> 承运人</div>
                                                </div>
                                                <div class="flex_1 padd12  bor_b center" >
                                                    <div> </div>
                                                </div>
                                            </div>
                                            <div class="flex " >
                                                <div class="flex_1 padd12 bor_r bor_b center" >
                                                    <div> 操作员</div>
                                                </div>
                                                <div class="flex_1 padd12  bor_b center" >
                                                    <div> </div>
                                                </div>
                                            </div>
                                            <div class="flex flex_1">
                                                <div class="flex_1 padd12 bor_r  center" >
                                                    <div> 收货人签章</div>
                                                </div>
                                                <div class="flex_1 padd12   center" >
                                                    <div> </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="margin-top: 20px;" class="flex justify_end">
            <a-button type="primary" @click="showCount = true">打印</a-button>
        </div>

        <a-modal :mask-closable="false" 
            v-model:visible="showCount"
            width="600px"
            title="提示"
            ok-text="打印"
            :footer="false"
        >
            <div class="flex justify_center align_center" style="height: 100px;">
                <div>已打印{{count}}次，确定打印？</div>
            </div>
            <div class="flex justify_end">
                <a-button v-print="printObj" type="primary">打印</a-button>
            </div>
        </a-modal>
    </div>
</template>

<script setup>
 import { defineProps, defineEmits, ref, reactive, onMounted } from "vue";
 import predictionDeriverOrder from "@/api/prediction/predictionDeriverOrder";
 import tool from '@/utils/tool'
 const props = defineProps({
    row:Object,
    user:Object,
    pick_typeid:Number,
    transport_type:Number,
    deptName:String,
 })
 const list = ref([])
 const count = ref(0)
 const showCount = ref(false)
 const printObj = {
    id: "peisingContent",
    popTitle: "页面打印",
    openCallback: (vue) => {
        predictionDeriverOrder
            .getprintSave({ type: 5, link_id: props.row.id})
            .then((res) => {
                showCount.value = false
                handlegetCount()
            });
    },
 };
 const handlegetCount = () => {
    predictionDeriverOrder
       .getCount({ type: 5, link_id: props.row.id})
       .then((res) => {
            console.log(res)
            count.value = res.data.count
        }); 
 }
 onMounted(()=>{
    console.log('888888',props.user.nickname)
    let lists = JSON.parse(JSON.stringify(props.row)).detail
    console.log('888888',lists)
    let newArr = []
    let zuiArr = []
    lists.map((v,i)=>{
        if(!newArr.includes(v.prediction.yundanhao)){
            newArr.push(v.prediction.yundanhao) 
        }
    })
    newArr.map((v,i)=>{
        lists.map((vv,ii)=>{
            if(v == vv.prediction.yundanhao){
                zuiArr[i] = vv
            }
        })
    })
    let colnArr = JSON.parse(JSON.stringify(zuiArr))
    colnArr.map((v,i)=>{
        v.number = 0
        v.weight = 0
    })
    colnArr.map((v,i)=>{
        lists.map((vv,ii)=>{
            if(v.yundanhao == vv.prediction.yundanhao){
                v.number += vv.number
                v.weight += vv.weight - 0
            }
        })
    })
    console.log('888888hsjdhasjdha:',colnArr)
    colnArr.map((v,i)=>{
        if (typeof v.prediction.goods_data === "object" && v.prediction.goods_data !== null) {
            if (v.prediction.goods_data instanceof Array) {
                console.log("是数组");
            } else {
                console.log("是普通对象");
                v.prediction.goods_data = [v.prediction.goods_data]
            }
        } else {
            v.prediction.goods_data = []
        }
    })
    list.value = colnArr
    console.log('888888',colnArr)
    handlegetCount()
 })
</script>

<style lang="less" scoped>
.scllo{
    overflow-y: scroll;
    height: 700px;
    scrollbar-width: none;
}
.scllo::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}
.box{
    width: 242mm;
    height: 140mm;
    padding: 10mm 10mm 10mm 16mm;
    box-sizing: border-box;
    position: relative;
}
@media print {
    .box {
        height: 148.5mm !important;
        margin-bottom: 0 !important;
        page-break-after: always !important;
    }
}
.page-break{
    page-break-before: always;
}
.box::-webkit-scrollbar {
  display: none;
}
.logoImg{
    position: absolute;
    top: 10mm;
    width: 200px;
}
.border{
    border: 1px solid rgba(0,0,0,1);
}
.bor_r{
    border-right: 1px solid rgba(0,0,0,1);
}
.bor_b{
    border-bottom: 1px solid rgba(0,0,0,1);
}
.padd12{
    padding: 8px 10px;
    box-sizing: border-box;
}
.text_center{
    text-align: center;
}
.center{
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>